import React, { ReactElement, useEffect, useState } from 'react';
import { ViewStyle, Animated, Easing, View } from 'react-native';

import styles from './style';

interface MaskProps {
  style?: ViewStyle | ViewStyle[];
  resAlpha: number;
  animatedDuration?: number;
  children?: any[] | any;
}

export default ({
  style,
  children,
  resAlpha,
  animatedDuration = 100
}: MaskProps): ReactElement => {
  const [alpha] = useState(new Animated.Value(0));

  useEffect((): void => {
    Animated.timing(alpha, {
      toValue: resAlpha,
      duration: animatedDuration,
      easing: Easing.ease
    }).start();
  }, [alpha, animatedDuration, resAlpha]);

  return (
    <View style={style}>
      <Animated.View style={[styles.container, { opacity: alpha }]} />
      {children}
    </View>
  );
};
